<template>
	<view>
	    <view class="topTabs">
			<scroll-view  class="uni-swiper-tab">
				<view class="swiper-tab-list" v-for="(item,index) in items" :key="index" :class="{'active':tabIndex==index}" @tap="change(index)">
	            {{item.name}}
				<view class="swiper-tab-line">
					
				</view>
	        </view>
			</scroll-view>
	        
	    </view>
	    <view class="end-cont" :class="{dis:btnnum == 0}">
			<view class="cj">
				<text class="tab-text_1">创建歌单</text>
				<text class="tab-text_2"></text>
				<image class="tab-image1" src="../../static/found/tianjia.png"></image>
				<image class="tab-image2" src="../../static/found/gengduo.png"></image>
			</view>
				<view class="tab-nr" v-for="(item,index) in gedan.slice(0,6)" :key="index" v-if="index>=1">
					<image :src="gedan[index].coverImgUrl" mode="" class="tab-nr_img1"></image>
					<text class="tab-nr_text1">{{gedan[index].name}}</text>
					<text class="tab-nr_text2">{{gedan[index].trackCount}}首</text>
					<image src="../../static/found/gengduo.png" mode="" class="tab-nr_img2"></image>
				</view>
			
		</view>
	    <view class="sc" :class="{dis:btnnum == 1}">
			<view class="cj">
				<text class="tab-text_1">收藏歌单</text>
				<image class="tab-image2" src="../../static/found/gengduo.png"></image>
			</view>
				<view class="tab-nr" v-for="(item,index) in gedan.slice(0,14)" :key="index" v-if="index>=6">
					<image :src="gedan[index].coverImgUrl" mode="" class="tab-nr_img1"></image>
					<text class="tab-nr_text1">{{gedan[index].name}}</text>
					<text class="tab-nr_text2">{{gedan[index].trackCount}}首</text>
					<image src="../../static/found/gengduo.png" mode="" class="tab-nr_img2"></image>
				</view>
	    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gedan:[],
				sHeight:500,
				btnnum: 0,
				tabIndex:'',
				items: [
				{
					id:1,
					name: '创建歌单'
				},
				{
					id:2,
					name: '收藏歌单'
				}
			],
		}
		},
		mounted() {
			this.getgedan()
		},
		methods: {
			//tab选项卡
			change(e) {
			    this.btnnum = e
			    this.tabIndex = e
			},
            //getgedan 
			getgedan(){
				uni.request({
					url:'http://localhost:3000/user/playlist?uid=361542888',
					method:'POST',
					success: (res) => {
						this.gedan = res.data.playlist
					}
				})
			}
			}
		
		}
</script> 
<style lang="scss">
	page{
		margin:0px;
		padding:0px;
	}
	.end-cont{
		display: none;
	}
	.sc{
		display: none;
	}
	.dis{
		display: block;
	}
	.topTabs{
		width:700rpx;
		height:100rpx;
		margin-top:40rpx;
		margin-left:20rpx;
		border-radius: 10rpx;
		
	}
	.swiper-tab-list{
		width:140rpx;
		height:60rpx;
		color:#696969;
		font-weight: bold;
		float: left;
		margin-left:140rpx;
		margin-top:10rpx;
		text-align: center;
	}
	.uni-swiper-tab .active{
		
		width:140rpx;
		height: 60rpx;
		color:#313131;
		font-family: bold;
	}
	.active .swiper-tab-line{
		width:120rpx;
		margin:auto;
		background-color: #fe3c3c;
		border: 6rpx solid #fe3c3c;
		border-radius: 60rpx;
		margin-top:-10rpx;
		
	}
	
	// 内容
	.sc{
		width:700rpx;
		height:1000rpx;
		margin-left:20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		
	}
	.end-cont{
		
		width:700rpx;
		height:750rpx;
		margin-left:20rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}
	.cj{
		width:700rpx;
		height:60rpx;
		padding-top:35rpx;
	    margin-left:40rpx;
		
		position: relative;
		
	}
	.tab-text_1{
		font-size:10rpx;
		color:#989898;
		letter-spacing:2rpx;
	}
	.tab-image1{
		margin-top: 24rpx;
		width:40rpx;
		height:40rpx;
		position: absolute;
		top:10rpx;
		right:150rpx;
	}
	.tab-image2{
		margin-top: 24rpx;
		width:50rpx;
		height:50rpx;
		position: absolute;
		top:8rpx;
		right:70rpx;
	}
	//歌单
	.tab-nr{
		margin-top: 20rpx;
		width: 700rpx;
		height:110rpx;
		padding-top: 20rpx;
		position: relative;
	}
	.tab-nr_img1{
		width:100rpx;
		height:100rpx;
		margin-left:40rpx;
		border-radius: 15rpx;
		box-shadow: 2px 1px #C0C4CC;
	}
	.tab-nr_img2{
		width:50rpx;
		height:50rpx;
		position: absolute;
		top:45rpx;
		right:30rpx
	}
	.tab-nr_text1{
		width:450rpx;
		position: absolute;
		top:30rpx;
		left:160rpx;
		font-weight: 600;
		font-size: 30rpx;
		color: #333333;
		letter-spacing: 1px;
		overflow: hidden;
		word-break: break-all;  /* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;  /* 超出部分省略号 */
		display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1; /** 显示的行数 **/
	}
	.tab-nr_text2{
		position: absolute;
		top:75rpx;
		left:160rpx;
		font-size: 10rpx;
		color: #979797;
		letter-spacing: 1px;
	}
</style>
